<template>
	<div v-loading="loading">
		<div class="content-top">
			<span class="h1">项目管理</span>
			<span class="h2">征收计划</span>
			<el-button type="primary" @click="fnAddTip()">添加</el-button>
		</div>
		<div class="content">
			<div class="title clearfix">
				<div class="fl">
					<label for="">工程项目:</label>
					<el-select v-model="project1" filterable placeholder="请选择" @change='changes()'>
						<el-option v-for="item in options" :key="item.ID" :label="item.Name" :value="item.ID">
						</el-option>
					</el-select>
					<span style="margin-left: 20px;">行政区域:</span>
					<el-cascader clearable :options="regions" filterable v-model="region" separator='-' change-on-select  @change='cascader1()'></el-cascader>
					<span style="margin-left: 20px;">征收类别:</span>
					<el-select v-model="form.zslb1" placeholder="请选择" filterable clearable>
						<el-option v-for="item in zsleList" :key="item.ID" :label="item.Name" :value="item.ID">
						</el-option>
					</el-select>
					
				</div>
				<div class="fr">
					<el-input v-model="search" placeholder="请输入项目名" style="width:217px;"></el-input>
					<el-button type="primary" @click='searchs()'>查询</el-button>
				</div>
			</div>
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column type="index" width="50">
				</el-table-column>
				<el-table-column prop="ProjectStr" label="工程项目">
				</el-table-column>
				<el-table-column prop="CategoryStr" label="征收类别">
				</el-table-column>
				<el-table-column prop="PlanAmount" label="计划数量/平方米">
				</el-table-column>
				<el-table-column prop="PlanMoney" label="计划金额/元">
				</el-table-column>
				<el-table-column prop="RegionStr" label="行政区域" show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-dropdown trigger="click">
							<el-button type="primary">
								操作<i class="el-icon-arrow-down el-icon--right"></i>
							</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item>
									<el-button type="success" size="small" @click="fnEdit(scope.row.ID,scope.row.ProjectID,scope.row.CategoryID,scope.row.PlanAmount,scope.row.PlanMoney,scope.row.RegionID)">修改</el-button>
								</el-dropdown-item>
								<el-dropdown-item>
									<el-button type="danger" size="small" @click="fnDel(scope.row.ID)">删除</el-button>
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination small :current-page="pages" @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" background>
				</el-pagination>
			</div>
		</div>
		<div class="add">
			<el-dialog title="计划管理" :visible.sync="addTip" width="500px">
				<div class="adduserinfo">
					<el-form ref="form" label-width="80px">
						<el-form-item label="工程项目">
							<el-select v-model="form.gcxm" filterable placeholder="请选择" @change='change1()'>
								<el-option v-for="item in options" :key="item.ID" :label="item.Name" :value="item.ID">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="征收类别">
							<el-select v-model="form.zslb" filterable placeholder="请选择">
								<el-option v-for="item in zsleList" :key="item.ID" :label="item.Name" :value="item.ID">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="行政区域">
							<el-cascader :options="regions" filterable separator='-' v-model="form.region" change-on-select @change='cascader()'></el-cascader>
						</el-form-item>
						<el-form-item label="计划数量">
							<el-input v-model="form.jhsl" placeholder="请输入内容"></el-input>
						</el-form-item>
						<el-form-item label="计划金额">
							<el-input v-model="form.jhje" placeholder="请输入内容"></el-input>
						</el-form-item>
					</el-form>
				</div>
				<span slot="footer" class="dialog-footer">
            <el-button @click="addTip = false">取 消</el-button>
            <el-button type="primary" @click="subAdd()">确 定</el-button>
        </span>
			</el-dialog>
		</div>
		
		<el-dialog title="修改管理" :visible.sync="addTip1" width="500px">
				<div class="adduserinfo">
					<el-form ref="form" label-width="80px">
						<el-form-item label="工程项目">
							<el-select v-model="form.gcxm" filterable placeholder="请选择" @change='chang2()'>
								<el-option v-for="item in options" :key="item.ID" :label="item.Name" :value="item.ID">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="征收类别">
							<el-select v-model="form.zslb" filterable placeholder="请选择">
								<el-option v-for="item in zsleList" :key="item.ID" :label="item.Name" :value="item.ID">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="行政区域">
							<el-cascader :options="regions" filterable separator='-' v-model="form.region" change-on-select @change='cascader()'></el-cascader>
						</el-form-item>
						<el-form-item label="计划数量">
							<el-input v-model="form.jhsl" placeholder="请输入内容"></el-input>
						</el-form-item>
						<el-form-item label="计划金额">
							<el-input v-model="form.jhje" placeholder="请输入内容"></el-input>
						</el-form-item>
					</el-form>
				</div>
				<span slot="footer" class="dialog-footer">
            <el-button @click="addTip1 = false">取 消</el-button>
            <el-button type="primary" @click="edits()">确 定</el-button>
        </span>
			</el-dialog>
	</div>
</template>
<script>
	import api from '../../axios/api'
	export default {
		name: "projectPlan",
		data() {
			return {
				loading:false,
				project1:'',//搜索项目id
				pages: 1, //页码
				total: 1, //总页码
				region: [],
				addTip: false,
				addTip1:false,//修改弹框
				search: "",//搜索
				form: {
					gcxm: "",
					zslb: "",
					jhsl: "",
					jhje: "",
					zslb1:'',
					region: [],//行政id
				},
				tableData: [], //列表
				options: [],//工程项目
				zsleList:[],//征收类别列表
				project: "",
				regions: [],//行政区域
				RegionID:'',//处理后的行政id
				id:'',//存储公共id
			};
		},
		created() {
			
			this.zList() 
			this.getlistlb()
		},
		methods: {
			//搜索
			searchs(){
				this.loading = true
				this.pages = 1
				this.$post(api.explist, {
					"Para": {
						"ProjectID": this.project1,
						"RegionID": this.region[this.region.length - 1],
						"QueryKeyWord": this.search,
						"CategoryID": this.form.zslb1
					},
					"PageSize": 10,
					"PageIndex": this.pages - 1,
					"OrderString": '',
					"ToExcel": false
				}).then((response) => {
					if(response.isOK == true && response.state == 200) {
						this.loading = false
						this.tableData = response.Data.Data
						this.total = response.Data.Items ? response.Data.Items : 1
					}else{
							this.loading = false
							this.$message.error(response.msg);
						}
					}).catch((err)=>{
						this.loading = false
					})
			},
			//获取征收类别
			getlistlb(){
				this.$get(api.getlistlb).then((response) => {
					if(response.statusText == 'OK' && response.status == 200) {
						this.zsleList = response.data
					} else {
						this.$message.error(response.statusText);
					}
				}).catch((err)=>{
					this.loading=false;
				})
			},
			//获取行政区域
			anonymousget(ids) {
				this.$get(api.anonymousget + '/' + ids ).then((response) => {
					if(response.data.isOK == true && response.data.state == 200) {
						for(var i = 0; i < response.data.Data.length; i++) {
							this.regions.push({
								label: response.data.Data[i].RegionName,
								value: response.data.Data[i].ID,
								ParentID: response.data.Data[i].ParentID
							})
						}
						this.regions = this.$toTree(this.regions)
					}else {
						this.$message.error(response.data.msg);
					}
				}).catch((err)=>{
					this.loading=false;
				})
			},
			//通过id过去区域
			changes(){
				this.RegionID=''
				this.regions = []
				if(this.project1){
					this.anonymousget(this.project1)
				}
				
			},
			change1(){
				this.RegionID =''
				this.regions = []
				this.form.region=[];
				if(this.form.gcxm){
					this.anonymousget(this.form.gcxm)
				}
				
			},
			chang2(){
				this.RegionID =''
				this.regions = []
				this.form.region = []
				if(this.form.gcxm){
					this.anonymousget(this.form.gcxm)
				}
				
			},
			//计算
			cascader() {
				this.RegionID = ''
				this.RegionID = this.form.region[this.form.region.length - 1]
			},
			//搜索计算
			cascader1() {
				this.RegionID = ''
				this.RegionID = this.region[this.region.length - 1]
			},
			//获取工程项目
			zList() {
				this.$post(api.getlistde).then(response => {
					if (response.isOK == true && response.state == 200) {
						this.options = response.Data
						this.project1=response.Data[0].ID
						this.explist()
					}else{
						this.$message.error(response.msg);
					}
				}).catch((error)=>{
					this.loading=false;
				})
			},
			//获取征收计划列表
			explist() {
				this.regions = []
				this.loading = true
				this.$post(api.explist, {
					"Para": {
						"ProjectID": this.project1,
						"RegionID":'',
						"QueryKeyWord": "",
						"CategoryID": ""
					},
					"PageSize": 10,
					"PageIndex": this.pages - 1,
					"OrderString": '',
					"ToExcel": false
				}).then((response) => {
					if(response.isOK == true && response.state == 200) {
						this.loading = false
						this.tableData = response.Data.Data
						this.total = response.Data.Items ? response.Data.Items : 1
						this.anonymousget(this.project1)
					}else {
						this.loading = false
						this.$message.error(response.msg);
					}
				}).catch((err)=>{
					this.loading = false
				})
			},
			//分页
			handleCurrentChange(val) {
					this.loading = true
					this.pages = val
					this.$post(api.explist, {
						"Para": {
							"ProjectID": this.project1,
							"RegionID": this.region[this.region.length - 1],
							"QueryKeyWord": this.search,
							"CategoryID": this.form.zslb1
						},
						"PageSize": 10,
						"PageIndex": this.pages - 1,
						"OrderString": '',
						"ToExcel": false
					}).then((response) => {
						if(response.isOK == true && response.state == 200) {
							this.loading = false
							this.tableData = response.Data.Data
							this.total = response.Data.Items ? response.Data.Items : 1
						}else {
							this.loading = false
							this.$message.error(response.msg);
						}
					}).catch((err)=>{
						this.loading = false
					})
			},
			//打开添加弹窗
			fnAddTip() {
				this.form.zslb = '';
				this.form.jhsl = '';
				this.form.jhje = '';
				this.RegionID = ''
				this.form.region = []
				this.addTip = true;
			},
			//提交添加
			subAdd() {
				if(this.form.gcxm == ''|| this.form.zslb == '' || this.RegionID =='' || this.form.jhsl ==''|| this.form.jhje==''){
						this.$message.error('不能为空');
						return
				}
				this.addTip = false;
				this.loading = true
				this.$post(api.expadd, {
				  "ProjectID": this.form.gcxm,
				  "CategoryID": this.form.zslb,
				  "RegionID": this.RegionID,
				  "PlanAmount":this.form.jhsl,
				  "PlanMoney":this.form.jhje
				}).then((response) => {
					if(response.isOK == true && response.state == 200) {
						this.loading = false;
						this.regions = [];
						this.form.gcxm='';
						this.pages = 1
						this.explist()
						this.$message({
							message: '添加成功',
							type: 'success'
						});
					}else {
						this.loading = false
						this.$message.error(response.msg);
					}
				}).catch((err)=>{
					this.loading = false
				})
			},
			//修改弹框
			fnEdit(id,ProjectID, CategoryID, PlanAmount, PlanMoney,RegionID) {
				this.id= id
				this.RegionID=''
				this.form.region=[];
				this.regions = []
				this.form.gcxm = ProjectID;
				this.chang2(this.form.gcxm)
				this.form.zslb = CategoryID;
				this.anonychildby(RegionID)
				this.RegionID = RegionID
				this.form.jhsl = PlanAmount;
				this.form.jhje = PlanMoney;
				this.addTip1 = true;
			},
			anonychildby(id){
				this.form.region = []
				this.$get(api.anonychildby + '/' + id).then((response) => {
					if(response.data.isOK == true && response.data.state ==200){
						if(!response.data.Data){
							this.form.region.push(id)
							return false
						}
						for(let i = response.data.Data.length-1;i>=0;i--){
							this.form.region.push(response.data.Data[i].ID)
						}
						this.form.region.push(id)
					}
					
				})
			},
			//确认修改
			edits(){
					if(this.form.gcxm == ''|| this.form.zslb == '' || this.RegionID =='' || this.form.jhs1 ==''|| this.form.jhje==''){
							this.$message.error('不能为空');
							return
					}
					if(this.form.region==''){
						this.$message.error('不能为空');
						return
					}
					this.addTip1 = false
					this.loading = true
					this.$post(api.expupdate, {
					  "ID": this.id,
					  "ProjectID": this.form.gcxm,
					  "CategoryID": this.form.zslb,
					  "RegionID": this.RegionID,
					  "PlanAmount":this.form.jhsl,
					  "PlanMoney":this.form.jhje
					}).then((response) => {
						if(response.isOK == true && response.state == 200) {
							this.loading = false
							this.form.gcxm=''
							this.pages = 1
							this.explist()
							this.$message({
								message: '修改成功',
								type: 'success'
							});
						}else {
							this.loading = false
							this.$message.error(response.msg);
						}
					}).catch((err)=>{
						this.loading = false
					})
			},
			//删除
			fnDel(id) {
				this.$confirm('将永久删除该类别, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.loading = true
					this.$get(api.expdel + '/' + id)
						.then((response) => {
							if(response.data.isOK == true && response.data.state == 200) {
								this.loading = false
								this.pages = 1
								this.explist()
								this.$message({
									message: '删除成功',
									type: 'success'
								});
							}else {
								this.loading = false
								this.$message.error(response.data.msg);
							}
						}).catch((err)=>{
							this.loading = false
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		}
	};
</script>
<style scoped>
	.content .select {
		width: 100%;
		margin-bottom: 10px;
	}
	
	.content .select label {
		display: inline-block;
		width: 80px;
		line-height: 40px;
	}
	
	.title {
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 10px;
	}
	
	.adduserinfo {
		width: 100%;
	}
	.adduserinfo .el-cascader{
		width: 100%!important;
	}
	.adduserinfo .el-select{
		width: 100%!important;
	}
</style>